import React, { useEffect, useState, useRef } from 'react';
import { Tree, Card, Dropdown, Button } from 'antd';
import { connect } from 'umi';
import FromSet from './components/SetForm';
import TableDataBlock from '@/components/TableDataBlock';
import './index.less';
const management = (props) => {
  const { dispatch, loading } = props;
  const [visible, setVisible] = useState(false);
  const [list, setList] = useState(false);
  useEffect(() => {
    fetchData();
  }, []);
  const fetchData = () => {
    dispatch({
      type: 'commodity/fetchListGoodsCategory',
      callback: (e) => {
        setList(filterList(e));
      },
    });
  };
  const filterList = (list) => {
    return list.map((item) => {
      const { subGoodsCategoryList: children } = item;
      const localItem = {
        ...item,
        children: children ? filterList(children) : undefined,
      };
      return localItem;
    });
  };
  const getColumns = [
    {
      title: '分类名称',
      dataIndex: 'categoryName',
    },
    {
      type: 'handle',
      width: 200,
      dataIndex: 'id',
      render: (val, record) => [
        {
          type: 'edit',
          click: () => {
            setVisible({
              show: true,
              detail: record,
            });
          },
        },
        {
          type: 'del',
          click: () => {
            dispatch({
              type: 'commodity/fakeDeleteGoodsCategory',
              payload: { id: val },
              callback: (e) => {
                fetchData();
              },
            });
          },
        },
      ],
    },
  ];
  const btnExtra = [
    {
      text: '新增',
      onClick: () =>
        setVisible({
          show: true,
        }),
    },
  ];
  return (
    <Card title='商品分类'>
      <FromSet
        reload={() => fetchData()}
        visible={visible}
        onClose={() => setVisible(false)}
      ></FromSet>
      <TableDataBlock
        btnExtra={btnExtra}
        loading={loading}
        columns={getColumns}
        rowKey={(record) => `${record.id}`}
        list={list}
      ></TableDataBlock>
    </Card>
  );
};

export default connect(({ loading }) => ({
  loading: loading.models.redBooklet,
}))(management);
